<template>
  <div class="person">
    <!-- 2.使用ref包裹的响应式数据 -->
    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <h2>地址：{{ address }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script setup lang="ts" name="Person">
// 实现响应式数据
import { ref } from "vue";
// 1.引入ref函数,为响应式的数据使用ref()函数包裹
// 数据
let name = ref("张三");
let age = ref(18);
// name和age是一个ref对象，它们的value属性是响应式的
let tel = 121398493;
let address = "北京";
//tel和address就是一个普通的字符串，不是响应式的

// 方法
function changeName() {
  // 3.JS中操作ref对象时需要.value
  name.value = "zhang-san";
  console.log(name.value);
}
// 注意：name不是响应式的，name.value是响应式的,所以如下代码不会引起页面的更新
// name = ref("李四")
function changeAge() {
  age.value += 1;
  console.log(age.value);
}
function showTel() {
  alert(tel);
}
// 不需要写return语句
</script>

<style scoped>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>
